*{margin:0;padding:0;font-family: "微软雅黑";}
li{list-style: none;}
.top{font-size: 1.4rem;height: 5rem;width: 100%;}
.top img{margin-left: 1rem;margin-top: 1rem;}
.top p{right:2rem;top:2.8rem;display: inline-block;position: absolute;}

.select{font-size: 1rem;height: auto;}
.select > p{float: left;font-size: 5rem;width:5rem;margin-top: 4rem;margin-left: 3rem;}
.select-moonPhase{float: left;margin-top: 6rem;margin-left: 3rem;}
.select-moonPhase p{width:4rem;color:#fff;background-color: rgb(126,209,88);border-radius: 15%;padding: 4px 4px;}
.select-moonPhase span img{float: left;width: 1.2rem;}
.select-weather{position: relative;float: left;margin-top: 2rem;margin-left: 4rem;font-size: 1.4rem;}
.select-weather ul li{line-height: 2rem;}
.select-weather ul li:nth-child(2){padding: 2px}
.select-weather ul li:nth-child(2){text-align: center;color:#fff;width:4rem;line-height:1.4rem;background-color: rgb(170,170,170);border-radius:1rem;padding: 3px 8px;}
.select-weather ul li:nth-child(3) p{display:inline-block;}
.select-phaseName {position: relative;height:4.4rem;background-color:rgb(249,249,249);margin-top: 2rem;box-shadow: 0px 6px 4px #eee;}
.select-phaseName ul{height: 4rem;}
.select-phaseName ul li{width:4rem;line-height:2rem;float:left;padding: 0.1rem 1.2rem;font-size: 1rem;font-weight: 500;margin: 0px;}
.select-phaseName ul li:nth-child(1){padding-right: 6px;}
.select-phaseName ul li:nth-child(2){padding-left: 1px}
.select-phaseName ul li img{width: 4rem;}

.weekend{background:rgb(249,249,249);margin-top: 1.6rem;height: 11.6rem;box-shadow: 0px 6px 4px #eee;}
.weekend ul{float: left;padding: 0.8rem;padding-top: 0;text-align: center;}
.weekend ul li{padding-top:0.4rem;}
.weekend ul li p{display: inline-block;}
.weekend ul li:nth-child(2) p{font-size: 1.4rem;}
/*.weekend ul li:nth-child(3) p{color: #999;}*/
.weekend ul li:nth-child(4) p{padding-top: 0.6rem;}
/*.weekend ul li:nth-child(5) p{color: #999;}*/
.weekend img{width: 2rem;}

.triangle-down {display:none;position: absolute;top:22.4rem;width: 0;height: 0;border-left: 0.6rem solid transparent;border-right: 0.6rem solid transparent;border-top: 0.8rem solid rgb(44,165,244);}
#sunrise,#sunset{font-size:1.4rem;display:inline-block;position:relative;bottom:0.5rem;padding-left: 0.4rem;}

.list_name ul{width: 98%;border-radius: 4px;margin:0 auto;background-color: rgb(232,232,232);color: rgb(44,165,244);height: 2rem;margin-top: 1rem;padding-top: 0.4rem;}
.list_name ul li{float: left;padding-left: 1.8rem;font-size: 1.2rem;}
.list_name ul li:nth-child(6){padding-left: 3rem;}

.list{}
.list ul{height: 4rem;border-bottom: 2px solid #eee;}
.list ul li{text-align:center;float: left;padding-left: 2.4rem;padding-top:0.8rem;height: 2rem;}
.list ul li img{margin:0 auto;width:2rem;}
.list ul li:nth-child(3),.list ul li:nth-child(4),.list ul li:nth-child(5){padding-top: 0rem;}
.list ul li:nth-child(2){padding-left: 2.5rem;}
.list ul li:nth-child(3){padding-left: 3.1rem;}
.list ul li:nth-child(4){padding-left: 3.2rem;}
.list ul li:nth-child(5){text-align: center;width: 3rem;padding-left: 2.8rem;}
.list ul li:nth-child(2) p:nth-child(1){background-color:rgb(227,99,52);color: #eee;border-radius: 0.3rem; }

@media only screen and (max-width: 375px) { 
	.list ul li{padding-left: 2rem;}
}
@media only screen and (max-width: 360px) { 
	.select-moonPhase{margin-left:2rem;}
	.weekend ul{padding-left: 0.6rem;}
	.select-phaseName{padding-left: 1rem;}
    .select-phaseName ul li {padding: 0.1rem 0.8rem;}
    .list_name ul li{padding-left: 1.4rem;}
	.list_name ul li:nth-child(6){padding-left: 2.6rem;}
	.list ul li{padding-left: 1.8rem;}
	.list ul li:nth-child(2){padding-left: 2.2rem;}
	.list ul li:nth-child(3){padding-left: 2.2rem;}
	.list ul li:nth-child(4){padding-left: 2.3rem;}
	.list ul li:nth-child(5){padding-left: 2rem;}
}
@media only screen and (max-width: 320px) { 
	.list ul li{padding-left: 2rem;}
	.select-moonPhase{margin-top: 6rem;margin-left: 2rem;}
	.select-phaseName ul li {padding: 0.1rem 0.6rem;}
	.weekend ul{padding-left: 0.2rem;}
	.list ul li:nth-child(2){padding-left: 1.6rem;}
	.list ul li:nth-child(3){padding-left: 2rem;}
	.list ul li:nth-child(4){padding-left: 2rem;}
	.list ul li:nth-child(5){padding-left: 1.5rem;}
	.list ul li:nth-child(6){padding-left: 1.4rem;}
}